<template>
	<view>
		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			<image mode="widthFix" src="../../static/f1.png" class="back" @click="backTo"></image>
			<view class="center">
				<label class="title">管理钱包</label>
			</view>

		</view>
		<view class="content">
			<view class="left">
				<view class=" leftItem ">
					<image src="../../static/im2s.png" class="leftItemImg" mode="widthFix"></image>

				</view>
			</view>

			<view class="right">

				<view class="contenView">
					<view class="contentLabel">
						<label class="contenViewName">身份钱包</label>
						<label class="contenViewName">管理</label>
					</view>

					<view class="contentItem" @click="openUserManager">
						<image src="../../static/img25.jpg" mode="widthFix" class="contentItemBg"></image>
						<label class="contentItemName">{{userInfo.walletList[0].name}}</label>
						<view class="itemAddr">{{userInfo.walletList[0].addr}}</view>
						<image src="../../static/gengduo.png" mode="widthFix" class="more"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="btn" @click="toPick">
					配对硬件
			</view>
			<view class="line"></view>
			<view class="btn" @click="toRegist">
					添加钱包
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad(option) {
			this.getUserInfo()
		},
		methods: {
			backTo() {
				this.Api.back()
			},
			getUserInfo() {
				var that = this
				let userInfo = {}
				uni.getStorage({
					key: "userInfo",
					success(res) {
						that.userInfo = res.data
					}
				})

			},
			openUserManager(){
				let tempUser= JSON.stringify( this.userInfo)
				this.Api.go_to('/pages/userManager/userManager?userInfo='+ tempUser )
			},
			toRegist(){
				this.Api.go_to('/pages/regist/regist' )
			},
			toPick()
			{
				this.Api.go_to('/pages/pair/pair' )
			}
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight+20 || 10; //如果没有获取到高度，那么指定10px；
			}
		}
	}
</script>

<style scoped>
	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		padding: 40rpx 40rpx;
		border-bottom: 1rpx #F3F3F3 solid;

	}

	.back {
		width: 40rpx;
	}


	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: -40rpx;

	}

	.title {
		font-size: 40rpx;
		font-weight: 500;
	}

	.content {
		width: 100%;
		margin-top: 20 rpx;
		padding: 0 40rpx;
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
	}

	.left {
		display: flex;
		align-items: center;

		flex-direction: column;

	}

	.leftItem {
		margin-top: 20rpx;
		padding-right: 40rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		border-right: 4rpx #016EDE solid;
	}

	.leftItemNo {
		margin-top: 20rpx;
		padding-right: 40rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;


	}

	.leftItemImg {
		width: 50rpx;
	}

	.usdt {
		border: none;
	}


	.right {
		width: 90%;
		display: flex;

		flex-direction: column;
		margin-left: 30rpx;
		padding-top: 0rpx;
		box-sizing: border-box;
		flex: 1;

	}

	.contenView {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	,
	.contentItem {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 25rpx;
		border-radius: 20rpx;
		background-color: #0062CC;
		position: relative;
	}

	.contentLabel {
		display: flex;
		justify-content: space-between;
	}

	.contenViewName {
		color: #6A6B7C;
		font-size: 30rpx;
	}

	.contentItemBg {
		width: 100%;
	}

	.contentItemName {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		color: white;
		font-size: 30rpx;
		font-weight: 500;
	}

	.itemAddr {
		position: absolute;
		top: 60rpx;
		left: 20rpx;
		color: white;
		max-width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 20rpx;
	}
	.more{
		width: 32rpx;
		position: absolute;
		right:5rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.bottom{
		width: 100%;
		position:fixed;
		bottom: 0;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-top: 1px #F0F0F0 solid;
	}
	.line{
		width: 1rpx;
		height: 60rpx;
		background-color:#F0F0F0 ;
	}
	.btn{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
